
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-caidan"></use>
                    </svg>
                    <div class="name">菜单</div>
                    <div class="fontclass">#gj-caidan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-roundcheckfill"></use>
                    </svg>
                    <div class="name">round_check_fill</div>
                    <div class="fontclass">#gj-roundcheckfill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-roundcheck"></use>
                    </svg>
                    <div class="name">round_check</div>
                    <div class="fontclass">#gj-roundcheck</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-round"></use>
                    </svg>
                    <div class="name">round</div>
                    <div class="fontclass">#gj-round</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-all"></use>
                    </svg>
                    <div class="name">all</div>
                    <div class="fontclass">#gj-all</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-back"></use>
                    </svg>
                    <div class="name">back</div>
                    <div class="fontclass">#gj-back</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-cart"></use>
                    </svg>
                    <div class="name">cart</div>
                    <div class="fontclass">#gj-cart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-category"></use>
                    </svg>
                    <div class="name">Category</div>
                    <div class="fontclass">#gj-category</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-close"></use>
                    </svg>
                    <div class="name">close</div>
                    <div class="fontclass">#gj-close</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-delete"></use>
                    </svg>
                    <div class="name">delete</div>
                    <div class="fontclass">#gj-delete</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-edit"></use>
                    </svg>
                    <div class="name">edit</div>
                    <div class="fontclass">#gj-edit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-email"></use>
                    </svg>
                    <div class="name">email</div>
                    <div class="fontclass">#gj-email</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-favorite"></use>
                    </svg>
                    <div class="name">favorite</div>
                    <div class="fontclass">#gj-favorite</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-form"></use>
                    </svg>
                    <div class="name">form</div>
                    <div class="fontclass">#gj-form</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-less"></use>
                    </svg>
                    <div class="name">less</div>
                    <div class="fontclass">#gj-less</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-moreunfold"></use>
                    </svg>
                    <div class="name">more_unfold</div>
                    <div class="fontclass">#gj-moreunfold</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-more"></use>
                    </svg>
                    <div class="name">more</div>
                    <div class="fontclass">#gj-more</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-pic"></use>
                    </svg>
                    <div class="name">pic</div>
                    <div class="fontclass">#gj-pic</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-search"></use>
                    </svg>
                    <div class="name">search</div>
                    <div class="fontclass">#gj-search</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-selected"></use>
                    </svg>
                    <div class="name">selected</div>
                    <div class="fontclass">#gj-selected</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-set"></use>
                    </svg>
                    <div class="name">set</div>
                    <div class="fontclass">#gj-set</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-success"></use>
                    </svg>
                    <div class="name">success</div>
                    <div class="fontclass">#gj-success</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-viewgallery"></use>
                    </svg>
                    <div class="name">ViewGallery</div>
                    <div class="fontclass">#gj-viewgallery</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-account"></use>
                    </svg>
                    <div class="name">account</div>
                    <div class="fontclass">#gj-account</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-remind"></use>
                    </svg>
                    <div class="name">remind</div>
                    <div class="fontclass">#gj-remind</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-service"></use>
                    </svg>
                    <div class="name">service</div>
                    <div class="fontclass">#gj-service</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-bad"></use>
                    </svg>
                    <div class="name">bad</div>
                    <div class="fontclass">#gj-bad</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-good"></use>
                    </svg>
                    <div class="name">good</div>
                    <div class="fontclass">#gj-good</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-loading"></use>
                    </svg>
                    <div class="name">loading、等待、菊花</div>
                    <div class="fontclass">#gj-loading</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-xuanzhong"></use>
                    </svg>
                    <div class="name">选中</div>
                    <div class="fontclass">#gj-xuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-caidan1"></use>
                    </svg>
                    <div class="name">菜单</div>
                    <div class="fontclass">#gj-caidan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-0"></use>
                    </svg>
                    <div class="name">gj-0</div>
                    <div class="fontclass">#gj-0</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-4"></use>
                    </svg>
                    <div class="name">gj-4</div>
                    <div class="fontclass">#gj-4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-1"></use>
                    </svg>
                    <div class="name">gj-1</div>
                    <div class="fontclass">#gj-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-3"></use>
                    </svg>
                    <div class="name">gj-3</div>
                    <div class="fontclass">#gj-3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-6"></use>
                    </svg>
                    <div class="name">gj-6</div>
                    <div class="fontclass">#gj-6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-5"></use>
                    </svg>
                    <div class="name">gj-5</div>
                    <div class="fontclass">#gj-5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-2"></use>
                    </svg>
                    <div class="name">gj-2</div>
                    <div class="fontclass">#gj-2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-7"></use>
                    </svg>
                    <div class="name">gj-7</div>
                    <div class="fontclass">#gj-7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-9"></use>
                    </svg>
                    <div class="name">gj-9</div>
                    <div class="fontclass">#gj-9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-8"></use>
                    </svg>
                    <div class="name">gj-8</div>
                    <div class="fontclass">#gj-8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-gouwuche"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#gj-gouwuche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-dingdan"></use>
                    </svg>
                    <div class="name">订单</div>
                    <div class="fontclass">#gj-dingdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-gouwuche1"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#gj-gouwuche1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-fenlei"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#gj-fenlei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-guojiaguan"></use>
                    </svg>
                    <div class="name">国家馆</div>
                    <div class="fontclass">#gj-guojiaguan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-peixunxueyuan"></use>
                    </svg>
                    <div class="name">培训学院</div>
                    <div class="fontclass">#gj-peixunxueyuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-dianzhuzhuanxiang"></use>
                    </svg>
                    <div class="name">店主专享</div>
                    <div class="fontclass">#gj-dianzhuzhuanxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-pinpaiguan"></use>
                    </svg>
                    <div class="name">品牌馆</div>
                    <div class="fontclass">#gj-pinpaiguan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-shoucang"></use>
                    </svg>
                    <div class="name">收藏</div>
                    <div class="fontclass">#gj-shoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-shouye"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="fontclass">#gj-shouye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-rexiaobang"></use>
                    </svg>
                    <div class="name">热销榜</div>
                    <div class="fontclass">#gj-rexiaobang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-xinpintuijian"></use>
                    </svg>
                    <div class="name">新品推荐</div>
                    <div class="fontclass">#gj-xinpintuijian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-wode1"></use>
                    </svg>
                    <div class="name">我的</div>
                    <div class="fontclass">#gj-wode1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-daifahuo"></use>
                    </svg>
                    <div class="name">待发货</div>
                    <div class="fontclass">#gj-daifahuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-daishouhuo"></use>
                    </svg>
                    <div class="name">待收货</div>
                    <div class="fontclass">#gj-daishouhuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-shouhoutuikuan"></use>
                    </svg>
                    <div class="name">售后退款</div>
                    <div class="fontclass">#gj-shouhoutuikuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-daifukuan"></use>
                    </svg>
                    <div class="name">待付款</div>
                    <div class="fontclass">#gj-daifukuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-rmb"></use>
                    </svg>
                    <div class="name">人民币符号(1)</div>
                    <div class="fontclass">#gj-rmb</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-_fuzhi1"></use>
                    </svg>
                    <div class="name">19_复制</div>
                    <div class="fontclass">#gj-_fuzhi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-_fuzhi"></use>
                    </svg>
                    <div class="name">26_复制</div>
                    <div class="fontclass">#gj-_fuzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-_fuzhi5"></use>
                    </svg>
                    <div class="name">28_复制</div>
                    <div class="fontclass">#gj-_fuzhi5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-_fuzhi6"></use>
                    </svg>
                    <div class="name">27_复制</div>
                    <div class="fontclass">#gj-_fuzhi6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-icon-test"></use>
                    </svg>
                    <div class="name">1(1)</div>
                    <div class="fontclass">#gj-icon-test</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-_fuzhi2"></use>
                    </svg>
                    <div class="name">收入</div>
                    <div class="fontclass">#gj-_fuzhi2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-_fuzhi3"></use>
                    </svg>
                    <div class="name">6_复制</div>
                    <div class="fontclass">#gj-_fuzhi3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_"></use>
                    </svg>
                    <div class="name">a_1</div>
                    <div class="fontclass">#gj-a_</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_1"></use>
                    </svg>
                    <div class="name">a_2</div>
                    <div class="fontclass">#gj-a_1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_2"></use>
                    </svg>
                    <div class="name">a_6</div>
                    <div class="fontclass">#gj-a_2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_3"></use>
                    </svg>
                    <div class="name">a_11</div>
                    <div class="fontclass">#gj-a_3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_4"></use>
                    </svg>
                    <div class="name">a_7</div>
                    <div class="fontclass">#gj-a_4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_5"></use>
                    </svg>
                    <div class="name">a_8</div>
                    <div class="fontclass">#gj-a_5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_6"></use>
                    </svg>
                    <div class="name">a_12</div>
                    <div class="fontclass">#gj-a_6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_7"></use>
                    </svg>
                    <div class="name">a_9</div>
                    <div class="fontclass">#gj-a_7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_8"></use>
                    </svg>
                    <div class="name">a_16</div>
                    <div class="fontclass">#gj-a_8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_9"></use>
                    </svg>
                    <div class="name">a_10</div>
                    <div class="fontclass">#gj-a_9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_10"></use>
                    </svg>
                    <div class="name">a_14</div>
                    <div class="fontclass">#gj-a_10</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_11"></use>
                    </svg>
                    <div class="name">a_13</div>
                    <div class="fontclass">#gj-a_11</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_12"></use>
                    </svg>
                    <div class="name">a_18</div>
                    <div class="fontclass">#gj-a_12</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_13"></use>
                    </svg>
                    <div class="name">a_20</div>
                    <div class="fontclass">#gj-a_13</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_14"></use>
                    </svg>
                    <div class="name">a_15</div>
                    <div class="fontclass">#gj-a_14</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_15"></use>
                    </svg>
                    <div class="name">a_17</div>
                    <div class="fontclass">#gj-a_15</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_16"></use>
                    </svg>
                    <div class="name">a_21</div>
                    <div class="fontclass">#gj-a_16</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_17"></use>
                    </svg>
                    <div class="name">a_19</div>
                    <div class="fontclass">#gj-a_17</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_18"></use>
                    </svg>
                    <div class="name">a_22</div>
                    <div class="fontclass">#gj-a_18</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_19"></use>
                    </svg>
                    <div class="name">a_23</div>
                    <div class="fontclass">#gj-a_19</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_20"></use>
                    </svg>
                    <div class="name">a_24</div>
                    <div class="fontclass">#gj-a_20</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_21"></use>
                    </svg>
                    <div class="name">a_25</div>
                    <div class="fontclass">#gj-a_21</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_22"></use>
                    </svg>
                    <div class="name">a_26</div>
                    <div class="fontclass">#gj-a_22</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_23"></use>
                    </svg>
                    <div class="name">a_5</div>
                    <div class="fontclass">#gj-a_23</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_26"></use>
                    </svg>
                    <div class="name">a_29</div>
                    <div class="fontclass">#gj-a_26</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_27"></use>
                    </svg>
                    <div class="name">a_30</div>
                    <div class="fontclass">#gj-a_27</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_28"></use>
                    </svg>
                    <div class="name">a_27</div>
                    <div class="fontclass">#gj-a_28</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_29"></use>
                    </svg>
                    <div class="name">a_32</div>
                    <div class="fontclass">#gj-a_29</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_30"></use>
                    </svg>
                    <div class="name">a_28</div>
                    <div class="fontclass">#gj-a_30</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_31"></use>
                    </svg>
                    <div class="name">a_31</div>
                    <div class="fontclass">#gj-a_31</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_32"></use>
                    </svg>
                    <div class="name">a_34</div>
                    <div class="fontclass">#gj-a_32</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_33"></use>
                    </svg>
                    <div class="name">a_35</div>
                    <div class="fontclass">#gj-a_33</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_34"></use>
                    </svg>
                    <div class="name">a_36</div>
                    <div class="fontclass">#gj-a_34</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_35"></use>
                    </svg>
                    <div class="name">a_33</div>
                    <div class="fontclass">#gj-a_35</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_36"></use>
                    </svg>
                    <div class="name">a_38</div>
                    <div class="fontclass">#gj-a_36</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_37"></use>
                    </svg>
                    <div class="name">a_39</div>
                    <div class="fontclass">#gj-a_37</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_38"></use>
                    </svg>
                    <div class="name">a_37</div>
                    <div class="fontclass">#gj-a_38</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_39"></use>
                    </svg>
                    <div class="name">a_41</div>
                    <div class="fontclass">#gj-a_39</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_40"></use>
                    </svg>
                    <div class="name">a_43</div>
                    <div class="fontclass">#gj-a_40</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_41"></use>
                    </svg>
                    <div class="name">a_40</div>
                    <div class="fontclass">#gj-a_41</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_42"></use>
                    </svg>
                    <div class="name">a_42</div>
                    <div class="fontclass">#gj-a_42</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_43"></use>
                    </svg>
                    <div class="name">a_44</div>
                    <div class="fontclass">#gj-a_43</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_44"></use>
                    </svg>
                    <div class="name">a_45</div>
                    <div class="fontclass">#gj-a_44</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_45"></use>
                    </svg>
                    <div class="name">a_46</div>
                    <div class="fontclass">#gj-a_45</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_46"></use>
                    </svg>
                    <div class="name">a_47</div>
                    <div class="fontclass">#gj-a_46</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_47"></use>
                    </svg>
                    <div class="name">a_49</div>
                    <div class="fontclass">#gj-a_47</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_48"></use>
                    </svg>
                    <div class="name">a_50</div>
                    <div class="fontclass">#gj-a_48</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_49"></use>
                    </svg>
                    <div class="name">a_52</div>
                    <div class="fontclass">#gj-a_49</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_50"></use>
                    </svg>
                    <div class="name">a_48</div>
                    <div class="fontclass">#gj-a_50</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_51"></use>
                    </svg>
                    <div class="name">a_53</div>
                    <div class="fontclass">#gj-a_51</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_52"></use>
                    </svg>
                    <div class="name">a_51</div>
                    <div class="fontclass">#gj-a_52</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_53"></use>
                    </svg>
                    <div class="name">a_54</div>
                    <div class="fontclass">#gj-a_53</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_54"></use>
                    </svg>
                    <div class="name">a_58</div>
                    <div class="fontclass">#gj-a_54</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_55"></use>
                    </svg>
                    <div class="name">a_55</div>
                    <div class="fontclass">#gj-a_55</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_56"></use>
                    </svg>
                    <div class="name">a_56</div>
                    <div class="fontclass">#gj-a_56</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_57"></use>
                    </svg>
                    <div class="name">a_60</div>
                    <div class="fontclass">#gj-a_57</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_58"></use>
                    </svg>
                    <div class="name">a_59</div>
                    <div class="fontclass">#gj-a_58</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_59"></use>
                    </svg>
                    <div class="name">a_57</div>
                    <div class="fontclass">#gj-a_59</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_60"></use>
                    </svg>
                    <div class="name">a_61</div>
                    <div class="fontclass">#gj-a_60</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_61"></use>
                    </svg>
                    <div class="name">a_63</div>
                    <div class="fontclass">#gj-a_61</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_62"></use>
                    </svg>
                    <div class="name">a_64</div>
                    <div class="fontclass">#gj-a_62</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_63"></use>
                    </svg>
                    <div class="name">a_62</div>
                    <div class="fontclass">#gj-a_63</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_64"></use>
                    </svg>
                    <div class="name">a_65</div>
                    <div class="fontclass">#gj-a_64</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_65"></use>
                    </svg>
                    <div class="name">a_66</div>
                    <div class="fontclass">#gj-a_65</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_66"></use>
                    </svg>
                    <div class="name">a_67</div>
                    <div class="fontclass">#gj-a_66</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_67"></use>
                    </svg>
                    <div class="name">a_69</div>
                    <div class="fontclass">#gj-a_67</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_68"></use>
                    </svg>
                    <div class="name">a_68</div>
                    <div class="fontclass">#gj-a_68</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_69"></use>
                    </svg>
                    <div class="name">a_73</div>
                    <div class="fontclass">#gj-a_69</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_70"></use>
                    </svg>
                    <div class="name">a_70</div>
                    <div class="fontclass">#gj-a_70</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_71"></use>
                    </svg>
                    <div class="name">a_72</div>
                    <div class="fontclass">#gj-a_71</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_72"></use>
                    </svg>
                    <div class="name">a_71</div>
                    <div class="fontclass">#gj-a_72</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-_fuzhi4"></use>
                    </svg>
                    <div class="name">7_复制</div>
                    <div class="fontclass">#gj-_fuzhi4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-_fuzhi7"></use>
                    </svg>
                    <div class="name">10_复制</div>
                    <div class="fontclass">#gj-_fuzhi7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-_fuzhi8"></use>
                    </svg>
                    <div class="name">6_复制</div>
                    <div class="fontclass">#gj-_fuzhi8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-_fuzhi9"></use>
                    </svg>
                    <div class="name">9_复制</div>
                    <div class="fontclass">#gj-_fuzhi9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-_fuzhi10"></use>
                    </svg>
                    <div class="name">8_复制</div>
                    <div class="fontclass">#gj-_fuzhi10</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-_fuzhi11"></use>
                    </svg>
                    <div class="name">11_复制</div>
                    <div class="fontclass">#gj-_fuzhi11</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_24"></use>
                    </svg>
                    <div class="name">a_3</div>
                    <div class="fontclass">#gj-a_24</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-b_"></use>
                    </svg>
                    <div class="name">b_1</div>
                    <div class="fontclass">#gj-b_</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-b_1"></use>
                    </svg>
                    <div class="name">b_3</div>
                    <div class="fontclass">#gj-b_1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-b_2"></use>
                    </svg>
                    <div class="name">b_4</div>
                    <div class="fontclass">#gj-b_2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-b_3"></use>
                    </svg>
                    <div class="name">b_5</div>
                    <div class="fontclass">#gj-b_3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-b_4"></use>
                    </svg>
                    <div class="name">b_2</div>
                    <div class="fontclass">#gj-b_4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-a_25"></use>
                    </svg>
                    <div class="name">a_4</div>
                    <div class="fontclass">#gj-a_25</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-bangzhuyukefu"></use>
                    </svg>
                    <div class="name">帮助与客服</div>
                    <div class="fontclass">#gj-bangzhuyukefu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-dianchangdidai"></use>
                    </svg>
                    <div class="name">店长地带</div>
                    <div class="fontclass">#gj-dianchangdidai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-dingdan1"></use>
                    </svg>
                    <div class="name">订单</div>
                    <div class="fontclass">#gj-dingdan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-wodejifen"></use>
                    </svg>
                    <div class="name">我的积分</div>
                    <div class="fontclass">#gj-wodejifen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-wodeshoucang"></use>
                    </svg>
                    <div class="name">我的收藏</div>
                    <div class="fontclass">#gj-wodeshoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-shouhuodizhi"></use>
                    </svg>
                    <div class="name">收货地址</div>
                    <div class="fontclass">#gj-shouhuodizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-shouhou"></use>
                    </svg>
                    <div class="name">售后</div>
                    <div class="fontclass">#gj-shouhou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-daishouhuo1"></use>
                    </svg>
                    <div class="name">待收货</div>
                    <div class="fontclass">#gj-daishouhuo1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-daifukuan1"></use>
                    </svg>
                    <div class="name">待付款</div>
                    <div class="fontclass">#gj-daifukuan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#gj-daifahuo1"></use>
                    </svg>
                    <div class="name">待发货</div>
                    <div class="fontclass">#gj-daifahuo1</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#gj-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
